import echarts from 'echarts';
require('echarts/dist/extension/dataTool.js');

class ECharts {
  // 消费账单图表-环形图
  billChart({ dom }) {
    const chart = echarts.init(document.querySelector(dom));
    var data = 80; //数值大小
    var max = 100; //满刻度大小
    const option = {
      //backgroundColor: '#ccc',

      color: ['#fff', 'rgba(255,255,255,.4)', 'transparent'],
      series: [
        {
          type: 'pie',
          startAngle: 190,
          center: ['50%', '60%'],
          radius: ['98%', '99%'],
          hoverAnimation: false,
          labelLine: {
            show: false
          },
          data: [
            {
              name: '',
              value: data,
              itemStyle: {
                normal: {
                  show: true,
                  color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {
                      offset: 0,
                      color: '#4CBCB0'
                    },
                    {
                      offset: 0.5,
                      color: '#5CE5D7'
                    },
                    {
                      offset: 1,
                      color: '#4CBCB0'
                    }
                  ]),
                  borderCap: 'round',
                  borderWidth: 6,
                  borderColor: '#00428E'
                }
              }
            },
            {
              //画中间的图标
              name: '',
              value: 0,
              label: {
                position: 'inside',
                // backgroundColor: {
                //     image: ''
                // },
                backgroundColor: '#fff',
                borderRadius: 6,
                width: 6,
                height: 6,
                padding: [6, 6, 6, 6],
                borderColor: '#26A6E4',
                borderWidth: 2
              }
            },
            {
              //画中间的图标
              name: '',
              value: 0,
              labelLine: {
                length: 30,
                length2: 30,
                show: true,
                color: '#000',
                lineStyle: {
                  color: '#0096DF',
                  type: 'dashed'
                }
              },
              label: {
                padding: [5, -25, 25, -25],
                color: '#0096DF',
                position: 'outside',
                formatter() {
                  return '80%';
                }
              }
            },
            {
              //画剩余的刻度圆环
              name: '',
              value: max - data,
              itemStyle: {
                color: '#E5ECF3',
                borderCap: 'round',
                borderWidth: 6,
                borderColor: '#E5ECF3'
              }
            },
            {
              //画剩余的刻度圆环
              name: '',
              value: 80,
              itemStyle: {
                color: 'transparent'
              }
            }
          ]
          // itemStyle:{
          //     borderCap: 'round',
          //     borderWidth: 10,
          //     borderColor: 'red'
          // },
        }
      ]
    };
    chart.setOption(option, true);
  }
  weatherChart({ dom }) {
    const chart = echarts.init(document.querySelector(dom));
    var data = 15; //数值大小
    var max = 100; //满刻度大小
    const option = {
      //echarts的设置
      grid: {
        left: 0,
        right: 0
      },
      title: {
        show: false
      },
      polar: {
        // 圆弧大小
        // radius: '115%',
        // center: ['50%', '52%']
      },
      angleAxis: {
        axisLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        min: 0,
        max: max,
        boundaryGap: ['0', '100'],
        startAngle: 180
      },
      radiusAxis: {
        type: 'category',
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        data: ['a', 'b', 'c'],
        z: 10
      },
      series: [
        //刻度尺
        {
          type: 'gauge',
          center: ['50%', '100%'],
          radius: '160%',
          startAngle: 152,
          endAngle: 28,
          z: 2,
          splitNumber: 2,
          axisTick: {
            show: true,
            lineStyle: {
              color: '#CCCCCC',
              width: 7,
              type: 'dashed',
              // dashOffset: 5,
              splitNumbe: 2
            },
            length: 1
          }, //刻度样式
          splitLine: {
            show: false,
            lineStyle: {
              color: '#fff',
              width: 5
            },
            length: -1
          }, //分隔线样式
          axisLabel: {
            color: 'rgba(255,255,255,0)',
            fontSize: 8
          }, //刻度节点文字颜色
          pointer: {
            show: false
          },
          axisLine: {
            show: false
          },
          label: {
            show: false
          },
          //仪表盘详情，用于显示数据。
          detail: {
            show: false
          }
        },
        {
          name: '内部进度条',
          type: 'gauge',
          center: ['50%', '100%'],
          radius: '78%',
          startAngle: 152,
          endAngle: 28,
          splitNumber: 10,
          axisLine: {
            lineStyle: {
              color: [[1, 'transparent']],
              width: 1
            }
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          itemStyle: {
            show: false,
            opacity: 0
          },
          detail: {
            show: false
          },
          title: {
            //标题
            show: false
          },
          data: [
            {
              name: '',
              value: data
            }
          ],
          pointer: {
            show: true,
            length: '75%',
            radius: '20%',
            width: 5 //指针粗细
          },
          animationDuration: 4000
        },
        {
          type: 'pie',
          center: ['50%', '100%'],
          radius: ['152%', '153%'],
          hoverAnimation: false,
          startAngle: 152, // 152 -26
          // endAngle: 360,
          data: [
            {
              name: '',
              value: data,
              labelLine: {
                show: false
              },
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            },
            {
              //画中间的小圆点图标
              name: '',
              value: 0,
              label: {
                position: 'inside',
                backgroundColor: '#f7b365',
                borderRadius: 8,
                padding: 4,
                borderWidth: 4,
                borderColor: '#f7b365'
              },
              labelLine: {
                show: false
              }
            },
            {
              name: '',
              value: max - data,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                color: 'rgba(0,0,0,0)'
              }
            }
          ]
        }
      ]
    };
    chart.setOption(option, true);
  }
}

export default new ECharts();
